/* 志愿者服务项目统一主题色彩 */

:root {
  /* 主色调 - 温暖的橙色系 */
  --primary-color: #FF6B35;           /* 主色调：温暖的橙色 */
  --primary-light: #FF8A65;           /* 主色调浅色 */
  --primary-dark: #E55A2B;            /* 主色调深色 */
  
  /* 辅助色 */
  --secondary-color: #4ECDC4;         /* 辅助色：清新的青色 */
  --accent-color: #45B7D1;            /* 强调色：蓝色 */
  --success-color: #96CEB4;           /* 成功色：绿色 */
  --warning-color: #FFEAA7;           /* 警告色：黄色 */
  --error-color: #DDA0DD;             /* 错误色：紫色 */
  
  /* 中性色 */
  --white: #FFFFFF;
  --light-gray: #F8F9FA;
  --gray: #E9ECEF;
  --medium-gray: #6C757D;
  --dark-gray: #495057;
  --black: #212529;
  
  /* 背景色 */
  --bg-primary: var(--white);
  --bg-secondary: var(--light-gray);
  --bg-accent: #FFF5F0;               /* 带橙色调的浅色背景 */
  
  /* 文字色 */
  --text-primary: var(--black);
  --text-secondary: var(--medium-gray);
  --text-light: var(--white);
  
  /* 边框色 */
  --border-color: var(--gray);
  --border-light: #F1F3F4;
  
  /* 阴影 */
  --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.15);
  --shadow-heavy: 0 8px 24px rgba(0, 0, 0, 0.2);
  
  /* 圆角 */
  --radius-small: 4px;
  --radius-medium: 8px;
  --radius-large: 12px;
  --radius-xl: 20px;
  
  /* 间距 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  
  /* 字体大小 */
  --font-xs: 12px;
  --font-sm: 14px;
  --font-md: 16px;
  --font-lg: 18px;
  --font-xl: 20px;
  --font-xxl: 24px;
}

/* 通用样式类 */
.btn-primary {
  background-color: var(--primary-color);
  color: var(--white);
  border: none;
  border-radius: var(--radius-medium);
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-md);
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background-color: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-medium);
}

.btn-secondary {
  background-color: var(--secondary-color);
  color: var(--white);
  border: none;
  border-radius: var(--radius-medium);
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-md);
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  background-color: #3DB8B0;
  transform: translateY(-1px);
  box-shadow: var(--shadow-medium);
}

.card {
  background-color: var(--white);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-light);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

.status-badge {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-xl);
  font-size: var(--font-sm);
  font-weight: 500;
}

.status-success {
  background-color: var(--success-color);
  color: var(--white);
}

.status-warning {
  background-color: var(--warning-color);
  color: var(--dark-gray);
}

.status-error {
  background-color: var(--error-color);
  color: var(--white);
}

.status-info {
  background-color: var(--accent-color);
  color: var(--white);
}

/* 响应式设计 */
@media (max-width: 768px) {
  :root {
    --spacing-lg: 16px;
    --spacing-xl: 24px;
    --font-lg: 16px;
    --font-xl: 18px;
    --font-xxl: 20px;
  }
} 